<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>03Functional Programming 通用函数 · ShaofeiZi Blog · 做个日常记录</title>
    <meta name="description" content="訾绍飞的博客。万物皆有裂缝处，那是光射进来的地方。">
    <link rel="shortcut icon" href="/BLOG/favicon.ico">
  <link rel="manifest" href="/BLOG/manifest.json">
  <meta name="theme-color" content="#3F51B5">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="apple-touch-icon" href="/BLOG/icons/192.png">
  <link rel="mask-icon" href="/BLOG/icons/safari-pinned-tab.svg" color="#3eaf7c">
  <meta name="msapplication-TileImage" content="/icons/192.png">
  <meta name="msapplication-TileColor" content="#3F51B5">
    
    <link rel="preload" href="/BLOG/assets/css/42.styles.90045bd1.css" as="style"><link rel="preload" href="/BLOG/assets/js/app.1a725be8.js" as="script"><link rel="preload" href="/BLOG/assets/js/31.0b0a749f.js" as="script"><link rel="prefetch" href="/BLOG/assets/js/7.88ba0bb7.js"><link rel="prefetch" href="/BLOG/assets/js/0.d3e592bd.js"><link rel="prefetch" href="/BLOG/assets/js/1.39b9c99c.js"><link rel="prefetch" href="/BLOG/assets/js/2.68dc10c9.js"><link rel="prefetch" href="/BLOG/assets/js/3.dfebdd5e.js"><link rel="prefetch" href="/BLOG/assets/js/4.ea97a821.js"><link rel="prefetch" href="/BLOG/assets/js/5.d8c2ecbf.js"><link rel="prefetch" href="/BLOG/assets/js/6.e51cd79c.js"><link rel="prefetch" href="/BLOG/assets/js/8.d9eebc06.js"><link rel="prefetch" href="/BLOG/assets/js/9.1a541d13.js"><link rel="prefetch" href="/BLOG/assets/js/10.4ec9ca67.js"><link rel="prefetch" href="/BLOG/assets/js/11.02558377.js"><link rel="prefetch" href="/BLOG/assets/js/12.d0e2086f.js"><link rel="prefetch" href="/BLOG/assets/js/13.5af02ddd.js"><link rel="prefetch" href="/BLOG/assets/js/14.5d9fcbf2.js"><link rel="prefetch" href="/BLOG/assets/js/15.ca0178b2.js"><link rel="prefetch" href="/BLOG/assets/js/16.cd99d056.js"><link rel="prefetch" href="/BLOG/assets/js/17.56f11c1d.js"><link rel="prefetch" href="/BLOG/assets/js/18.21837cc7.js"><link rel="prefetch" href="/BLOG/assets/js/19.73335fea.js"><link rel="prefetch" href="/BLOG/assets/js/20.1632ab79.js"><link rel="prefetch" href="/BLOG/assets/js/21.43175244.js"><link rel="prefetch" href="/BLOG/assets/js/22.5b7c0cca.js"><link rel="prefetch" href="/BLOG/assets/js/23.e624ba97.js"><link rel="prefetch" href="/BLOG/assets/js/24.ac5f7b41.js"><link rel="prefetch" href="/BLOG/assets/js/25.6934a11d.js"><link rel="prefetch" href="/BLOG/assets/js/26.407b2583.js"><link rel="prefetch" href="/BLOG/assets/js/27.7449d673.js"><link rel="prefetch" href="/BLOG/assets/js/28.52e25437.js"><link rel="prefetch" href="/BLOG/assets/js/29.fba21f3a.js"><link rel="prefetch" href="/BLOG/assets/js/30.2cd6d3e2.js"><link rel="prefetch" href="/BLOG/assets/js/32.92134487.js"><link rel="prefetch" href="/BLOG/assets/js/33.ad2b89cc.js"><link rel="prefetch" href="/BLOG/assets/js/34.9b22334e.js"><link rel="prefetch" href="/BLOG/assets/js/35.825f3d75.js"><link rel="prefetch" href="/BLOG/assets/js/36.cc3da84c.js"><link rel="prefetch" href="/BLOG/assets/js/37.8f339f62.js"><link rel="prefetch" href="/BLOG/assets/js/38.5674618f.js"><link rel="prefetch" href="/BLOG/assets/js/39.180f0d85.js"><link rel="prefetch" href="/BLOG/assets/js/40.275f26e3.js"><link rel="prefetch" href="/BLOG/assets/js/41.ce0f5927.js">
    <link rel="stylesheet" href="/BLOG/assets/css/42.styles.90045bd1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div data-app="true" id="app" class="application theme--light"><div class="application--wrap"><div class="v-progress-linear blog-progress" style="height:3px;display:none;"><div class="v-progress-linear__background accent" style="height:3px;opacity:0.4;width:100%;"></div><div class="v-progress-linear__bar"><!----><div class="v-progress-linear__bar__determinate accent" style="width:0%;"></div></div></div><aside class="v-navigation-drawer v-navigation-drawer--close v-navigation-drawer--fixed v-navigation-drawer--is-mobile" style="height:100%;margin-top:0px;max-height:calc(100% - 0px);transform:translateX(-240px);width:240px;"><div><div class="aside-brand-wrap"><div class="aside-brand"><a href="/BLOG/" class="aside-avatar elevation-2 router-link-active"><img src="/BLOG/face.png" alt="avatar"></a><hgroup class="mt-3 variant-hide"><div class="subheading white--text">訾绍飞</div><a href="mailto:zishaofei221@gmail.com" title="zishaofei221@gmail.com" class="aside-mail primary--text text--lighten-5">zishaofei221@gmail.com</a></hgroup></div></div><hr class="v-divider theme--dark"><div class="v-list nav-list"><div class="secondary--text"><a href="/BLOG/" class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-home"></i></div></div><div class="v-list__tile__content">首页</div></a></div><div class="secondary--text"><a href="/BLOG/tags" class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-tag"></i></div></div><div class="v-list__tile__content">标签</div></a></div><div class="secondary--text"><a href="https://github.com/ShaofeiZi" target="_blank" class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fab fa-github"></i></div></div><div class="v-list__tile__content">Github</div></a></div><div class="secondary--text"><a href="/BLOG/about" class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-user-secret"></i></div></div><div class="v-list__tile__content">About</div></a></div></div></div><div class="v-navigation-drawer__border"></div></aside><nav class="blog-toolbar v-toolbar v-toolbar--fixed theme--dark primary" style="margin-top:0px;padding-right:0px;padding-left:0px;transform:translateY(0px);"><div class="v-toolbar__content" style="height:56px;"><button type="button" class="v-btn v-btn--icon"><div class="v-btn__content"><i class="fa fa-bars"></i></div></button><div class="v-toolbar__title">03Functional Programming 通用函数</div><div class="spacer"></div><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><div class="v-menu" style="display:none;"><div class="v-menu__activator"><button type="button" class="v-btn v-btn--icon"><div class="v-btn__content"><i class="fa fa-share-alt"></i></div></button></div><div class="v-menu__content" style="max-height:auto;min-width:0px;max-width:auto;top:12px;left:0px;transform-origin:top right;z-index:0;display:none;"><div class="v-list"><div class="secondary--text"><a class="v-list__tile v-list__tile--link"><div class="v-list__tile__avatar"><div class="v-avatar" style="height:40px;width:40px;"><i class="fa fa-lg fa-copy"></i></div></div><div class="v-list__tile__title">复制链接</div></a></div></div><input type="text" tabindex="-1" aria-hidden="true" value="" class="fake-hide"></div></div></div></nav><main class="v-content" style="padding-top:56px;padding-right:0px;padding-bottom:0px;padding-left:0px;"><div class="v-content__wrap"><div class="container blog-container grid-list-xl align-center"><div class="layout row wrap"><div class="flex mb-3 xs12"><article class="v-card elevation-16 post-card" style="height:undefined;"><div class="v-card__title"><div class="flex xs12"><h2 class="display-1 mb-3">03Functional Programming 通用函数</h2><div class="post-meta"><time datetime="2018-04-29T12:15:55.000Z" class="secondary--text post-time">2018年04月29日</time></div></div></div><div class="v-card__text pt-0 pb-0"><div class="flex xs12"><div class="content custom"><h1 id="_30-天精通-rxjs-03-：-functional-programming-通用函数"><a href="#_30-天精通-rxjs-03-：-functional-programming-通用函数" aria-hidden="true" class="header-anchor">#</a> 30 天精通 RxJS (03)： Functional Programming 通用函数</h1><blockquote><p>了解 Functional Programming 的通用函数，能让我们写出更简洁的代码，也能帮助我们学习 RxJS。</p></blockquote><p>这是【30天精通 RxJS】的 03 篇，如果还没看过 02 篇可以往这边走：
<a href="https://github.com/ShaofeiZi/30-days-proficient-in-rxjs/blob/master/30%20%E5%A4%A9%E7%B2%BE%E9%80%9A%20RxJS%20(02)%EF%BC%9A%20Functional%20Programming%20%E5%9F%BA%E6%9C%AC%E8%A7%82%E5%BF%B5.md" target="_blank" rel="noopener noreferrer">30 天精通 RxJS (02)： Functional Programming 基本观念</a></p><p>读者可能会很好奇，我们的主题是 RxJS 为什么要特别讲 Functional Programming 的通用函数呢？ 实际上，RxJS 核心的 Observable 操作观念跟 FP 的数组操作是极为相近的，只学会以下几个基本的方法跟观念后，会让我们之后上手 Observable 简单很多！</p><p>今天的代码比较多，大家可以直接看视频！</p><h2 id="foreach"><a href="#foreach" aria-hidden="true" class="header-anchor">#</a> ForEach</h2><blockquote><p>forEach 是 JavaScript 在 ES5 后，原生就有支援的方法。</p></blockquote><p>原本我们可能要透过 for loop 取出数组中的每一个元素</p><pre class="language-javascript"><code><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Jerry'</span><span class="token punctuation">,</span> <span class="token string">'Anna'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre><p>现在可以直接透过数组的 forEach 取出每一个元素。</p><pre class="language-javascript"><code><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Jerry'</span><span class="token punctuation">,</span> <span class="token string">'Anna'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>item <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre><p>forEach 是 FP 操作数组的基本方法，我们可以用这个方法来实例下面三个我们今天要讲的重点分别为 map, filter, concatAll。</p><h2 id="map"><a href="#map" aria-hidden="true" class="header-anchor">#</a> Map</h2><p>试着把 newCourseList 每个元素的 { id, title } 塞到新的数组 idAndTitlePairs</p><pre class="language-javascript"><code><span class="token keyword">var</span> newCourseList <span class="token operator">=</span> <span class="token punctuation">[</span>
	<span class="token punctuation">{</span>
		<span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511021</span><span class="token punctuation">,</span>
		<span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;React for Beginners&quot;</span><span class="token punctuation">,</span>
		<span class="token string">&quot;coverPng&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png&quot;</span><span class="token punctuation">,</span>
		<span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">5</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token punctuation">{</span>
		<span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511022</span><span class="token punctuation">,</span>
		<span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;Vue2 for Beginners&quot;</span><span class="token punctuation">,</span>
		<span class="token string">&quot;coverPng&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png&quot;</span><span class="token punctuation">,</span>
		<span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">5</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token punctuation">{</span>
		<span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511023</span><span class="token punctuation">,</span>
		<span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;Angular2 for Beginners&quot;</span><span class="token punctuation">,</span>
		<span class="token string">&quot;coverPng&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png&quot;</span><span class="token punctuation">,</span>
		<span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">5</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token punctuation">{</span>
		<span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511024</span><span class="token punctuation">,</span>
		<span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;Webpack for Beginners&quot;</span><span class="token punctuation">,</span>
		<span class="token string">&quot;coverPng&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png&quot;</span><span class="token punctuation">,</span>
		<span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">4</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span> idAndTitle <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

newCourseList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>course<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	idAndTitle<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> id<span class="token punctuation">:</span> course<span class="token punctuation">.</span>id<span class="token punctuation">,</span> title<span class="token punctuation">:</span> course<span class="token punctuation">.</span>title <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre><p>虽然我们成功的把 newCourseList 转成 idAndTitlePairs，但这样的写法还是显得有点太复杂了，我们可以用更抽象化的方式来完成。</p><p>上面我们练习到 newCourseList 转换成一个新的数组 idAndTitlePairs，这个转换的过程其实就是两件事</p><ul><li>遍历 newCourseList 所有的元素</li><li>把每个元素的预期值给到新的数组</li></ul><p>把这个过程抽象化成一个方法 map，以下是简化的基本思路：</p><ol><li>我们会让每个 数组 都有一个 map 方法</li><li>这个方法会让使用者自订传入一个 callback function</li><li>这个 callback function 会回传使用者预期的元素</li></ol><blockquote><p>虽然 ES5 之后原生的 JavaScript 数组有 map 方法了，但希望读者自己写一遍，能帮助理解。</p></blockquote><pre class="language-javascript"><code><span class="token comment">// 我们希望每一个数组都有 map 这个方法，所以我们在 Array.prototype 扩充 map function</span>
Array<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">map</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// map 最后一定会返回一个新数组，所以我们先创建一个新数组</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
	  <span class="token comment">// this 就是呼叫 map 的数组</span>
	  result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	  <span class="token comment">// 执行使用者定义的 callback， callback 会回传使用者预期的元素，所以我们把它 push 进新数组</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre><blockquote><p>这里用到了 JavaScript 的 prototype chain 以及 this 等观念，可以看此<a href="https://www.youtube.com/watch?v=BlT6pCG2M1I" target="_blank" rel="noopener noreferrer">视频</a>了解！</p></blockquote><p>到这里我们就实例完成 map 的方法了，让我们来试试这个方法吧！</p><pre class="language-javascript"><code><span class="token keyword">var</span> idAndTitle <span class="token operator">=</span> newCourseList
                 <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>course<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                     <span class="token keyword">return</span> <span class="token punctuation">{</span> id<span class="token punctuation">:</span> course<span class="token punctuation">.</span>id<span class="token punctuation">,</span> title<span class="token punctuation">:</span> course<span class="token punctuation">.</span>title <span class="token punctuation">}</span><span class="token punctuation">;</span>
                 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre><p>可以看到我们的代码更加的简洁！</p><h2 id="filter"><a href="#filter" aria-hidden="true" class="header-anchor">#</a> Filter</h2><p>如果我们希望过滤一个数组，留下数组中我们想要的元素，并产生一个新的数组，要怎么做呢？
先让我们用 forEach 完成！</p><p>让我们过滤出 rating 值是 5 的元素</p><pre class="language-javascript"><code><span class="token keyword">var</span> ratingIsFive <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

newCourseList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>course<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token keyword">if</span><span class="token punctuation">(</span>course<span class="token punctuation">.</span>rating <span class="token operator">===</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		ratingIsFive<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>course<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre><p>同样的我们试着来简化这个过程，首先在这个转换的过程中，我们做了两件事：</p><ol><li>遍历 newCourseList 中的所有元素</li><li>判断元素是否符合条件，符合则加到新的数组中</li></ol><pre class="language-javascript"><code>Array<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">filter</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
	<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
		<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">)</span>
			result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre><p>试试这个方法</p><pre class="language-javascript"><code><span class="token keyword">var</span> ratingIsFive <span class="token operator">=</span> newCourseList
                   <span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>course<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> course<span class="token punctuation">.</span>rating <span class="token operator">===</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre><p>会发现我们的代码又变简单了，接着我们试着把 filter, map 串起来。</p><p>如果我想要取出所有 rating 是 5 的所有 course title</p><pre class="language-javascript"><code><span class="token keyword">var</span> ratingIsFive <span class="token operator">=</span> newCourseList
                   <span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>course<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> course<span class="token punctuation">.</span>rating <span class="token operator">===</span> <span class="token number">5</span><span class="token punctuation">)</span>
                   <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>course <span class="token operator">=&gt;</span> course<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre><h2 id="concatall"><a href="#concatall" aria-hidden="true" class="header-anchor">#</a> ConcatAll</h2><p>有时候我们会遇到组出一个二维数组，但我们希望数组是一维的，问题如下：</p><p>假如我们要取出 courseLists 中所有 rating 为 5 的课程，这时可能就会用到两个 forEach</p><pre class="language-javascript"><code><span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>
  id<span class="token punctuation">:</span> <span class="token number">888</span><span class="token punctuation">,</span>
  name<span class="token punctuation">:</span> <span class="token string">'JerryHong'</span><span class="token punctuation">,</span>
  courseLists<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    <span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;My Courses&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;courses&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511019</span><span class="token punctuation">,</span>
      <span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;React for Beginners&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;coverPng&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;tags&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">&quot;JavaScript&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">5</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511020</span><span class="token punctuation">,</span>
      <span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;Front-End automat workflow&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;coverPng&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;tags&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;gulp&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;webpack&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">4</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;New Release&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;courses&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511022</span><span class="token punctuation">,</span>
      <span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;Vue2 for Beginners&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;coverPng&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;tags&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">&quot;JavaScript&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">5</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511023</span><span class="token punctuation">,</span>
      <span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;Angular2 for Beginners&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;coverPng&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;tags&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">&quot;JavaScript&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">4</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> allCourseIds <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

user<span class="token punctuation">.</span>courseLists<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>list <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  list<span class="token punctuation">.</span>courses
    <span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>item <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>rating <span class="token operator">===</span> <span class="token number">5</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>item <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      allCourseIds<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre><p>可以看到上面的代码，我们用了较为低阶的操作来解决这个问题，我们刚刚已经试着用抽象化的方式实例了 map 跟 filter，那我们同样也能够定义一个方法用来 摊平二维数组。</p><p>让我们来加入一个 concatAll 方法来简化这段代码吧！
concatAll 要做的事情很简单，就是把一个二维数组转成一维。</p><pre class="language-javascript"><code>Array<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">concatAll</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token comment">// 用 apply 完成</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    result<span class="token punctuation">.</span>push<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>result<span class="token punctuation">,</span> array<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// 用两个 forEach 完成</span>
  <span class="token comment">// this.forEach((array) =&gt; {</span>
  <span class="token comment">//   array.forEach(item =&gt; {</span>
  <span class="token comment">//     result.push(item)</span>
  <span class="token comment">//   })</span>
  <span class="token comment">// });</span>

  <span class="token comment">// 用 ES6 spread 完成</span>
  <span class="token comment">// this.forEach((array) =&gt; {</span>
  <span class="token comment">//   result.push(...array);</span>
  <span class="token comment">// })</span>

  <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

</code></pre><p>同样的我们用前面定要好的 courseLists 来试试 concatAll 吧！</p><pre class="language-javascript"><code><span class="token keyword">var</span> allCourseIds <span class="token operator">=</span> user<span class="token punctuation">.</span>courseLists<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>list <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token keyword">return</span> list<span class="token punctuation">.</span>courses<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>course <span class="token operator">=&gt;</span> course<span class="token punctuation">.</span>rating <span class="token operator">===</span> <span class="token number">5</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">concatAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

</code></pre><p>这边出一个比较难的题目，大家可以想想看要怎么解</p><pre class="language-javascript"><code><span class="token keyword">var</span> courseLists <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  <span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;My Courses&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;courses&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511019</span><span class="token punctuation">,</span>
    <span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;React for Beginners&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;covers&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/150/200/tech&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/200/200/tech&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/300/200/tech&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">&quot;tags&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      name<span class="token punctuation">:</span> <span class="token string">&quot;JavaScript&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">5</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511020</span><span class="token punctuation">,</span>
    <span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;Front-End automat workflow&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;covers&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/150/200/arch&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/200/200/arch&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/300/200/arch&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">&quot;tags&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
      <span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;gulp&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
      <span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;webpack&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">5</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token string">&quot;name&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;New Release&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;courses&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511022</span><span class="token punctuation">,</span>
    <span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;Vue2 for Beginners&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;covers&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/150/200/nature&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/200/200/nature&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/300/200/nature&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">&quot;tags&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      name<span class="token punctuation">:</span> <span class="token string">&quot;JavaScript&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">5</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;id&quot;</span><span class="token punctuation">:</span> <span class="token number">511023</span><span class="token punctuation">,</span>
    <span class="token string">&quot;title&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;Angular2 for Beginners&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;covers&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/150/200/people&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/200/200/people&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      width<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">&quot;http://placeimg.com/300/200/people&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">&quot;tags&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      name<span class="token punctuation">:</span> <span class="token string">&quot;JavaScript&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">&quot;rating&quot;</span><span class="token punctuation">:</span> <span class="token number">5</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">/* 
var result = courseList
不得直接使用索引 covers[0]，请用 concatAll, map, filter, forEach 完成
result 结果为 [
    {
      id: 511019,
      title: &quot;React for Beginners&quot;,
      cover: &quot;http://placeimg.com/150/200/tech&quot;
    }, {
      id: 511020,
      title: &quot;Front-End automat workflow&quot;,
      cover: &quot;http://placeimg.com/150/200/arch&quot;
    }, {
      id: 511022,
      title: &quot;Vue2 for Beginners&quot;,
      cover: &quot;http://placeimg.com/150/200/nature&quot;
    }, {
      id: 511023,
      title: &quot;Angular2 for Beginners&quot;,
      cover: &quot;http://placeimg.com/150/200/people&quot;
    },
 ]
*/</span>

</code></pre><p>练习连结： <a href="https://jsbin.com/wifulas/6/edit?js,output" target="_blank" rel="noopener noreferrer">JSBin</a> | <a href="https://jsfiddle.net/s6323859/5wcgnf89/1/" target="_blank" rel="noopener noreferrer">JSFiddle</a></p><p>这题有点难，大家可以想想看，我把答案写在<a href="https://jsbin.com/rahezacane/edit?js,console" target="_blank" rel="noopener noreferrer">这里</a>了！</p><p>如果大家还想做更多的练习可以到这个连结：<a href="http://reactivex.io/learnrx/" target="_blank" rel="noopener noreferrer">http://reactivex.io/learnrx/</a></p><blockquote><p>这个连结是 Jafar 大神为他的 RxJS workshop 所做的练习网站！</p></blockquote><h2 id="今日小结"><a href="#今日小结" aria-hidden="true" class="header-anchor">#</a> 今日小结</h2><p>今天讲了 FP 操作数组的三个通用函数 forEach, map, filter，以及我们自己定义的一个方法叫 concatAll。这几天我们把学习 RxJS 的前置观念跟知识基本上都讲完了，明天我们就开始进入 RxJS 的重点核心 Observable 喽！</p></div></div></div><div class="v-card__actions"><div class="flex xs12"><a href="/BLOG/tags/RXJS"><span tabindex="0" class="v-chip capitalize chip-tag v-chip--label v-chip--small"><span class="v-chip__content">RXJS</span></span></a></div></div></article></div><div class="flex text-xs-left xs6"><a href="/BLOG/posts/rxjs04.html" class="post-nav v-btn v-btn--flat v-btn--router"><div class="v-btn__content"><div class="grey--text"><i class="fa mr-1 fa-chevron-left"></i>Prev</div><div class="title mt-1 primary--text hidden-xs-only">04什么是 Observable ?</div></div></a></div><div class="flex text-xs-right xs6"><a href="/BLOG/posts/rxjs02.html" class="post-nav v-btn v-btn--flat v-btn--router"><div class="v-btn__content"><div class="grey--text">Next
          <i class="fa ml-1 fa-chevron-right"></i></div><div class="title mt-1 primary--text hidden-xs-only">02Functional Programming 基本观念</div></div></a></div><div class="flex mt-3 xs12"><div class="v-card" style="height:undefined;"><div class="v-card__title"><span class="headline">Comment</span></div></div></div></div></div><footer class="v-footer blog-footer darken-1 mt-3 theme--dark" style="height:auto;"><div class="primary--text text--lighten-4 text-xs-center py-3 v-card v-card--flat v-card--tile primary" style="height:undefined;"><div class="v-card__text pb-0">博客内容遵循 <a rel="license noopener noreferrer" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></div><div class="v-card__text pt-0 mt-1"><span>訾绍飞 © 2015 - 2018</span><span><!---->
        Power by
        <a href="https://vuepress.vuejs.org" target="_blank" rel="noopener noreferrer">VuePress</a> Theme
        <a href="https://github.com/ShaofeiZi/BLOG" target="_blank" rel="noopener noreferrer">indigo</a></span></div></div></footer></div></main><button type="button" class="v-btn v-btn--bottom v-btn--floating v-btn--fixed v-btn--right accent" style="display:none;"><div class="v-btn__content"><i class="fa fa-lg fa-chevron-up"></i></div></button></div></div></div>
    <script src="/BLOG/assets/js/31.0b0a749f.js" defer></script><script src="/BLOG/assets/js/app.1a725be8.js" defer></script>
  </body>
</html>
